<template>
  <div class="ele-body">
    <div class="ele-cell ele-cell-align-top ele-extension-more">
      <el-card
        shadow="never"
        body-style="padding: 5px 0;"
        class="ele-extension-menu-card"
        style="width: 151px;min-height: calc(100vh - 210px);">
        <el-menu
          :mode="mode"
          style="border: none;"
          :default-active="active"
          class="ele-extension-menu ele-scrollbar-hide"
          @select="onSelect">
          <el-menu-item index="icon">字体图标</el-menu-item>
          <el-menu-item index="tag">标签组件</el-menu-item>
          <el-menu-item index="message">消息提示</el-menu-item>
          <el-menu-item index="step">步骤条</el-menu-item>
          <el-menu-item index="menu">菜单导航</el-menu-item>
          <el-menu-item index="dialog">拖拽弹窗</el-menu-item>
          <el-menu-item index="other">其它组件</el-menu-item>
        </el-menu>
      </el-card>
      <div class="ele-cell-content">
        <more-icon v-if="active==='icon'"/>
        <more-tag v-if="active==='tag'"/>
        <more-message v-if="active==='message'"/>
        <more-steps v-if="active==='step'"/>
        <more-menu v-if="active==='menu'"/>
        <more-dialog v-if="active==='dialog'"/>
        <more-other v-if="active==='other'"/>
      </div>
    </div>
  </div>
</template>

<script>
import MoreIcon from './more-icon';
import MoreTag from './more-tag';
import MoreSteps from './more-steps';
import MoreMenu from './more-menu';
import MoreMessage from './more-message';
import MoreDialog from './more-dialog';
import MoreOther from './more-other';

export default {
  name: 'ExtensionMore',
  components: {
    MoreIcon,
    MoreTag,
    MoreSteps,
    MoreMenu,
    MoreMessage,
    MoreDialog,
    MoreOther
  },
  data() {
    return {
      active: 'icon'
    };
  },
  computed: {
    mode() {
      return this.$store.state.theme.screenWidth < 768 ? 'horizontal' : 'vertical';
    }
  },
  mounted() {
    this.active = this.$route.query.active || 'icon';
  },
  methods: {
    onSelect(index) {
      if (this.$route.path !== '/extension/more' || this.$route.query.active !== index) {
        this.$router.push({path: '/extension/more', query: {active: index}});
      }
    }
  },
  watch: {
    $route() {
      this.active = this.$route.query.active || 'icon';
    }
  }
}
</script>

<style scoped>
@media screen and (max-width: 768px) {
  .ele-extension-more {
    display: block;
  }

  .ele-extension-menu-card {
    width: auto !important;
    min-height: auto !important;
    margin-bottom: 10px;
  }

  .ele-extension-menu-card >>> .el-card__body {
    padding: 0 !important;
  }

  .ele-extension-menu {
    display: flex;
    white-space: nowrap;
    overflow: auto;
  }

  .ele-extension-menu > li {
    float: none;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
  }

  .ele-extension-more > .ele-cell-content {
    padding: 0;
  }
}
</style>
